<template>
  <div>
    <el-row :gutter="30">
      <el-col  :span="3">
        <span>修改人：</span>
        <el-tag>{{backupInfo.user}}</el-tag>
      </el-col>
      <el-col :span="4">
        <span> 修改时间：</span>
        <el-tag>{{backupInfo.time}}</el-tag>
      </el-col>
      <el-col :span="12">
        <span>颜色标识：</span>
        <el-tag color="#409eff" style="color: black">内容变更(包括文字修改，增删改查优先级/标签、改变节点顺序、移动节点位置等)</el-tag>
        <el-tag color="#67c23a" style="color: black">新增节点</el-tag>
        <el-tag color="#f56c6c" style="color: black">删除节点</el-tag>
      </el-col>
    </el-row>
    <VueTestcaseMinderEditor
      ref="minderEditor"
      :initJson="initJson"
      :allow-edit-priority="editMode"
      :allow-edit-label="editMode"
      :allow-edit-result="resultMode"
      :allow-edit-node="editMode"
      :showSaveBtn="showSaveBtn">
    </VueTestcaseMinderEditor>
  </div>
</template>

<script>
// import 'vue-minder-testcase/lib/VueTestcaseMinderEditor.css'
import request from '@/utils/axios'
import {dateFormatYmdHMS} from "@/views/casepage/DateFormat";
export default {
  name: "CaseBackupDetail.vue",
  data() {
    return {
      initJson: {
        root: {
          data: {
            text: '主题',
            id: '0'
          },
          children: [
            { data: { text: '分支', id: '1', resource: ['自定义标签'] }}
          ]
        }
      },
      resultMode: false,
      editMode: false,
      showSaveBtn: false,
      backupInfo: {},
    }
  },
  methods: {
    getCaseBackupById: function() {
      console.log('getCaseBackupById')
      const url = '/backup/getBackupById'
      request(url, {
        method: 'GET',
        params: { backupId: this.$route.params.backupId }
      }).then(res => {
        if (res.code === 200) {
          const backupRes = res.data
          this.initJson = JSON.parse(backupRes.caseContent)
          this.backupInfo = {
            'user': res.data.creator? res.data.creator: '',
            'time': res.data.gmtCreated? dateFormatYmdHMS(res.data.gmtCreated): ''
          }
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          });
        }
      })
    }
  },
  created () {
    this.getCaseBackupById()
  }
}
</script>

<style scoped>

</style>
